<template>
  <div class="reportcharts">
<!--    <h2>分时-分项报表</h2>-->
    <div class="con">
      <div
        :class="kpiCheckType.length<=1?'bairepecharts':'repecharts'"
        :id="timeId1"
      ></div>
      <div v-show="kpiCheckType.length >1"
        class="repecharts"
        :id="timeId2"
      ></div>
      <div v-show="kpiCheckType.length >2"
        class="repecharts"
        :id="timeId3"
      ></div>
      <div v-show="kpiCheckType.length >3"
        class="repecharts"
        :id="timeId4"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .reportcharts {
    width: 100%;
    height:auto;
    background: #fff;
    padding: 35px 10px 20px 35px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
    }
    .echardiv{
      width: 100%;
      height: 420px;
    }
    .repecharts {
      width: 50%;
      height: 640px;
      display: inline-block;
      >div{
        margin: 0 auto;
      }
    }
    
    .con {
      font-size: 0px;
      position: relative;
      margin-top: 10px;
      .el-tabs {
        overflow: inherit;
        .el-tabs__header {
          width: 85px;
          .el-tabs__item {
            span {
              font-size: 16px;
              i {
                margin-right: 8px;
              }
            }
          }
        }
        .el-tabs__content {
          overflow: inherit;
          .tab-block{
            display: none!important;
          }
        }
      }
      .bairepecharts{
        width:100%;
        height: 640px;
        display: inline-block;
        >div{
          margin: 0 auto;
        }
      }
      .kpi{
        position: absolute;
        top: -45px;
        right:0;
        margin-right: 60px;
      }
      .kpis {
        position: absolute;
        left: 210px;
        top: -45px;
      }
    }
    .timeoption {
      position: absolute;
      right: 0;
      top: -55px;
      .on {
        .el-input--suffix {
          .el-input__inner {
            color: #e8eeff;
            background: #5580ff;
          }
        }
      }
      margin-right: 60px;
      line-height: 48px;
      label {
        font-size: 18px;
        vertical-align: top;
      }
      .el-select {
        display: inline-block;
        margin-left: 5px;
        width: 72px;
        height: 30px;
        .el-input__inner {
          box-sizing: border-box;
          height: 32px;
          text-align: center;
          padding: 0 18px 0 0;
          width: 100%;
          font-size: 14px;
        }
        .el-input {
          position: relative;
          z-index: 9;

          .el-input__suffix {
            .el-input__suffix-inner {
              line-height: 100%;
              display: inline-block;
            }
            right: 0;
            span {
              .el-select__caret {
                font-size: 12px;
                color: #8ba9ff;
              }
            }
          }
        }
      }
      .timebtn {
        float: right;
        display: block;
        height: 100%;
        padding-top: 10px;
        //margin-left: -3px;
        a,
        .el-radio {
          border: 1px solid #dbe1e5;
          border-left: none;
          margin: 0 !important;
          float: left;
          height: 30px;
          line-height: 30px;
          color: #737373;
          font-size: 14px;
          padding: 0 18px;
          cursor: pointer;
          .el-radio__input {
            display: none;
          }
          .el-radio__label {
            padding: 0;
            line-height: 30px;
          }
          &.on,
          &.is-checked {
            color: #e8eeff !important;
            .el-radio__label {
              color: #e8eeff;
            }
            background: #5580ff !important;
          }
          &:first-child {
            border-left: 1px solid #dbe1e5;
            border-radius: 5px 0 0 5px;
          }
          &:last-child {
            border-radius: 0 5px 5px 0;
          }
          &:hover {
            background: #ebebeb;
            color: #333;
            opacity: 0.9;
          }
        }
      }
    }
  }
</style>
<script>
  let echarts = require("echarts");
  let moment = require("moment");
  var Echarts1 = null;
  var Echarts2 = null;
  var Echarts3 = null;
  var Echarts4 = null;
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  let unit = reportGlobal.unit;
  let KPIname = reportGlobal.name;
  export default {
    props: {
      kpislist:{
        default:function () {
          return []
        }
      },
      timeSubData:{
        default: function() {
          return []
        }
      },
      x_data:{
        default: function() {
          return []
        }
      },
      y_data:{
        default: function() {
          return []
        }
      },
      con_w:{
        default:function () {
          return ''
        }
      }
    },
    data() {
      return {
        timeId1:
          Number(
            Math.random()
            .toString()
            .substr(3, 15) + Date.now()
          ).toString(36) + "Echarts1",
        timeId2:
          Number(
            Math.random()
            .toString()
            .substr(3, 15) + Date.now()
          ).toString(36) + "Echarts2",
        timeId3:
          Number(
            Math.random()
            .toString()
            .substr(3, 15) + Date.now()
          ).toString(36) + "Echarts3",
        timeId4:
          Number(
            Math.random()
            .toString()
            .substr(3, 15) + Date.now()
          ).toString(36) + "Echarts4",
        defaultEcharts:{            //默认样式与无数据图片
          title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 70,
            x2: "8%"
          },
          backgroundColor:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#f5f8fe' // 0% 处的颜色
            }
            ],
            global: false // 缺省为 false
          },
          series: []
        },
        kpiCheckType:[],
        record:'',          //记录指标点击为最后一个值
      };
    },
    components: {},
    created() {},
    mounted() {
      $('.bairepecharts div').css('margin','0 auto');
      //默认分时
      Echarts1 = echarts.init(document.getElementById(this.timeId1));
      Echarts2 = echarts.init(document.getElementById(this.timeId2));
      Echarts3 = echarts.init(document.getElementById(this.timeId3));
      Echarts4 = echarts.init(document.getElementById(this.timeId4));
      this.loadEchart(this.defaultEcharts);
    },
    beforeDestroy(){},
    watch: {
      kpislist(val){
        if(val.length){
          this.kpiCheckType = val
          // console.log(val,'kpi');
        }
      },
      con_w(val){
        // console.log(val,'con_w');
        this.loadEchartResize(val);
      }
    },
    methods: {
      UpData(ishavedata){
        // console.log('UpData');
        // console.log(this.kpiCheckType,'kpiCheckType');
        // console.log(this.timeSubData,'timeSubData');

        if(ishavedata==false ||this.timeSubData.length==0){
          this.loadEchart(this.defaultEcharts);
          return
        };
        if(this.kpiCheckType.length<1) {
          this.defaultEcharts.title.text="请至少选择一个要查看的指标"
          this.loadEchart(this.defaultEcharts);
          return
        };
        if(this.kpiCheckType.includes('stay')){
          this.defaultEcharts.title.text="选择滞留人数指标无法显示饼状图"
          this.loadEchart(this.defaultEcharts);
          return
        }
        for(let i in this.kpiCheckType){
          let option = {
            title : {},
            tooltip : {
              show:true,
              trigger: 'axis',
            },
            legend: {
              type: 'scroll',
              orient: "horizontal",
              width:'70%',
              top: '5%',
              left:'center',
              itemGap: 20,
            },
            grid: {top: '55%',bottom:100},
            axisPointer:{
              triggerOn:'click'
            },
            xAxis: {
              type: "category",
              gridIndex: 0,
              axisLabel: {
                rotate: 30
              },
              data:this.x_data
            },
            yAxis: {
              type: "value",
              name: '',
              position: 'left',
              axisLine: {
                lineStyle: {
                  color: '#2c69f3'
                }
              }
            },
            series : [],
            dataZoom:[
              {
                show: true,
                start: 0,
                end: 100,
                height:30,
              },
              {
                type: 'slider',
                start: 0,
                end: 100,
              },
            ],
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            color:['#67e6b2','#77e7ff','#ffc02e','#2c69f3','#9f70ff','#b72cff','#8032e2','#e858bd','#ea6881','#f28e7b','#f1b89b','#f2dfa5','#5db8ff','#e7780b','#eb5c5c','#9dff6d','#f3e657','#FD8E56','#ac2525','#560cb3'],
            dataset: {
              source: []
            },
          };
          let sourceArr = ['product',...this.x_data]
          option.dataset.source[0] = sourceArr
          let value = this.x_data[0]
          // console.log(this.y_data,'y_data');
          for(let j in this.y_data[this.kpiCheckType[i]]){
            let seriesObj ={
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
            }
            let source = [j,...this.y_data[this.kpiCheckType[i]][j]]
            option.dataset.source.push(source)
            option.series.push(seriesObj);
          }
          option.series.push({
            type: 'pie',
            id: this.kpiCheckType[i],
            radius: '30%',
            center: ['50%', '35%'],
            label: {
              width:120,
              formatter: '{b}:\n {@'+ value +'} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: value,
              tooltip: value
            }
          });
          option.title = {
            text: KPIname[this.kpiCheckType[i]],
            subtext:this.x_data[0],
            itemGap:44,
            subtextStyle:{
              color:'#222',
              fontSize:16,
            },
            x: 'center'
          }
          if(i == 0){
            Echarts1.on('updateAxisPointer', event => {
              let xAxisInfo = event.axesInfo[0];
              if (xAxisInfo) {
                let dimension = xAxisInfo.value + 1;
                Echarts1.setOption({
                  title:{
                    subtext:this.x_data[dimension-1]
                  },
                  series: {
                    id: this.kpiCheckType[i],
                    label: {
                      formatter: '{b}:\n {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                      value: dimension,
                      tooltip: dimension
                    }
                  }
                });
              }
            });
            Echarts1.setOption(option, true);
          }else if(i == 1){
            Echarts2.on('updateAxisPointer', event => {
              let xAxisInfo = event.axesInfo[0];
              if (xAxisInfo) {
                let dimension = xAxisInfo.value + 1;
                Echarts2.setOption({
                  title:{
                    subtext:this.x_data[dimension-1]
                  },
                  series: {
                    id: this.kpiCheckType[i],
                    label: {
                      formatter: '{b}:\n {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                      value: dimension,
                      tooltip: dimension
                    }
                  }
                });
              }
            });
            Echarts2.setOption(option, true);
          }else if(i == 2){
            Echarts3.on('updateAxisPointer', event => {
              let xAxisInfo = event.axesInfo[0];
              if (xAxisInfo) {
                let dimension = xAxisInfo.value + 1;
                Echarts3.setOption({
                  title:{
                    subtext:this.x_data[dimension-1]
                  },
                  series: {
                    id: this.kpiCheckType[i],
                    label: {
                      formatter: '{b}:\n {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                      value: dimension,
                      tooltip: dimension
                    }
                  }
                });
              }
            });
            Echarts3.setOption(option, true);
          }else if(i == 3){
            Echarts4.on('updateAxisPointer', event => {
              let xAxisInfo = event.axesInfo[0];
              if (xAxisInfo) {
                let dimension = xAxisInfo.value + 1;
                Echarts4.setOption({
                  title:{
                    subtext:this.x_data[dimension-1]
                  },
                  series: {
                    id: this.kpiCheckType[i],
                    label: {
                      formatter: '{b}:\n {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                      value: dimension,
                      tooltip: dimension
                    }
                  }
                });
              }
            });
            Echarts4.setOption(option, true);
          }
        }
      },
      loadEchart(option) {
        if(this.kpiCheckType.length<=1)
        {
          $('.bairepecharts div').css('margin','0 auto');
        }
        Echarts1.setOption(option, true);
        Echarts2.setOption(option, true);
        Echarts3.setOption(option, true);
        Echarts4.setOption(option, true);
      },
      loadEchartResize(w) {
        let opts = { width:  w/2 };
        // console.log(opts,'timeSub');
        Echarts1.resize(opts);
        Echarts2.resize(opts);
        Echarts3.resize(opts);
        Echarts4.resize(opts);
      },
      isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
          return false;
        } else {
          return true;
        }
      },
      //指标中是否存在%单位的
      isPer(arr,isfan=false){
        for(let i in arr) {
          if(isfan) {
            if(unit[arr[i]]!='%') {
              return true;
            }
          } else{
            if(unit[arr[i]]=='%') {
              return true;
            }
          }
        }
        return false;
      },
      //得到Max百分比
      getMaxPer(arr){
        let max=50;
        for(let i in arr) {
          if(unit[arr[i]]=='%') {
            for(let j in this.y_data[arr[i]][0]) {
              max=max > this.y_data[arr[i]][0][j] || !(this.y_data[arr[i]][0][j]) ? max : this.y_data[arr[i]][0][j];
            }
          }
        }
        let a=0;
        if(max>50) {
          a = parseInt( Math.ceil(max)% 10);
        }
        return Math.ceil(max)>50?(Math.ceil(max)+(10-a)):50;
      }
    },
  };
</script>
